<template>
  <div class="dialog-warp">
    <div class="dialog-search">
      <el-input
        placeholder="标题搜索"
        size="medium"
        style="width: 300px; height: 50px; border-radius: 10px"
        v-model="queryForm.textTitle"
      />
      &nbsp;
      <el-button size="medium" type="primary" @click="search"> 搜索 </el-button>
      <el-button size="medium" @click="rest"> 重置 </el-button>
    </div>

    <div class="dialog-content">
      <el-card
        class="box-card"
        v-for="(item, index) in searchData"
        :key="index"
      >
        <div class="doc-i">
          <div class="doc-it">
            <p class="doc-it-tit">
              {{ item.textTitle }}
            </p>
            <span class="doc-it-tab">
              <span>{{
                item.textOrder == null ? "暂无" : item.textOrder
              }}</span>
              <span>{{ item.modifyUserName }}</span>
              <span>{{  item.addDate
                      ? item.addDate.substring(0, 10)
                      : "" }}</span>
            </span>
            <div class="doc-it-bth">
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    icon="el-icon-search"
                    @click="handleImgLook(item)"
                  >
                    图文
                  </el-button>
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    icon="el-icon-search"
                    @click="handleLook(item)"
                  >
                    视频
                  </el-button>
                </div>
          </div>
          <div class="doc-ib">
            <p style="margin-top: 5px">
              关键词>> <span>{{ item.textLabel }}</span>
            </p>
          </div>
        </div>
      </el-card>
    </div>
    <div class="dialog-pager">
      <!-- 分页 -->
      <vxe-pager
        background
        align="right"
        class="pagination"
        @page-change="handleCurrentChange"
        :current-page.sync="page.currentPage"
        :page-size.sync="page.pageSize"
        :total="page.totalResult"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'NextJump',
          'Sizes',
          'FullJump',
          'Total',
        ]"
      />
    </div>
    <helpTextViodeDialog
      v-if="helpTextViodeDialogFlag"
      ref="helpTextViodeDialogRef"
    />
    <helpTextImgDialog 
      v-if="helpTextImgDialogFlag"
      ref="helpTextImgDialogRef"
    />
  </div>
</template>

<script>
import store from "@/store";
import { helpTextList } from "@/api/knowledge/helpText";
import helpTextViodeDialog from "./helpTextViodeDialog.vue";
import helpTextImgDialog from "./helpTextImgDialog.vue"
export default {
  name: `helpShowTextPage`,
  components: { helpTextViodeDialog,helpTextImgDialog },
  data() {
    return {
      dialogVisible: false,
      inputValue: ``,
      page: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
      searchData: [],
      queryForm: { textTitle: `` },
      isParent: `child`,
      isSearch: "", // 添加isSearch变量
      item: "",
      searchResults: [],
      total: 0,
      queryForm: {
        textTitle: "",
        textLabel:"",
      },
      textBussinessTypeCode:"111",
      helpTextImgDialogFlag:false,
    };
  },
  created() {
    this.helpTextViodeDialogFlag = true;
    this.helpTextImgDialogFlag = true;
    this.init();
  },
  methods: {
    init() {
      this.isSearch = this.$route.query.isParentDataLoaded;
      this.page.totalResult = parseInt(this.$route.query.total);
      let seartitle = this.$route.query.searchTxt
      let searchLabel = this.$route.query.searchLabel;
      if(seartitle || searchLabel) {
        this.$set(this.queryForm, 'textTitle', seartitle)
        this.$set(this.queryForm, 'textLabel', searchLabel)
        this.$nextTick(() => {
          this.search()
        })
      }else{
        this.getHelpTextList();
      }
     
    },
    search() {
      this.isSearch = true;
      this.page.currentPage = 1;
      this.getHelpTextList();
    },
    getHelpTextList() {
      let textTitle = undefined
      let textLabel = undefined
      if(this.queryForm.textTitle) {
        textTitle = this.queryForm.textTitle.trim()
      }
      if(this.queryForm.textLabel) {
        textLabel = this.queryForm.textLabel.trim()
      }
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          textBussinessTypeCode: this.textBussinessTypeCode,
          pageSize: this.page.pageSize,
          currentPage: this.page.currentPage,
          textTitle: textTitle,
          textLabel: textLabel, 
        },
      };
      helpTextList(params).then((data) => {
          if (data.result) {
            this.searchData = data.resultdata.data;
            this.page.totalResult = data.resultdata.count;
          }
        })
        .catch((error) => {
        });
    },
    handleCurrentChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
      this.getHelpTextList();
    },
    handleLook(item) {
      this.helpTextViodeDialogFlag = true;
      this.$refs.helpTextViodeDialogRef.inits(item);
    },
    handleImgLook(item){
      this.helpTextImgDialogFlag = true;
      this.$refs.helpTextImgDialogRef.inits(item)
    },
    rest() {
      this.queryForm.textTitle = ``;
    },
  },
};
</script>

<style scoped>
.dialog-warp {
  width: 100vw;
  height: 100vh;
  background: #ccc;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dialog-search {
  width: 100%;
  height: 3.93333rem;
  background: #ffffff;
  padding: 10px;
}
.dialog-content {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: #ffffff;
  flex-grow: 1;
}
.dialog-pager {
  width: 100%;
  height: 3.93333rem;
  background: #ffffff;
}
.box-card {
  width: 100%;
  margin-top: 5px;
}
.doc-it {
  margin-bottom: 10px;
}

.doc-it-co {
  padding: 10px;
  border: solid 1px #0e9aef;
  border-radius: 10px;
  float: left;
  margin-right: 30px;
  width: 150px;
  text-align: center;
}

.doc-it-tit {
  font-size: 0.938vw;
  font-weight: 700;
  margin-bottom: 0.26vw;
}

.doc-it-tab span {
  font-size: 14px;
  border-left: solid 1px #999999;
  padding: 0 10px;
}

.doc-it-tab span:first-child {
  border-left: none;
  padding-left: 0;
}

.doc-it-bth {
  float: right;
  margin-right: 50px;
  margin-top: -5px;
}

.doc-ib {
  width: 100%;
  padding: 5px 10px;
}
>>> .vxe-pager {
  bottom: 0;
  height: 40 !important;
  border: none;
}
</style>
